<template>

	<view class="page flex-col">
		<public-module></public-module>
		<!-- <f-navbar fontColor="#fff" :bgColor="PrimaryColor" :scrollTop="scrollTop" navbarType='5'
			:isShowLeft="false"></f-navbar> -->
		<view class="headBox home-header"
			:style="{background:'linear-gradient(to left top,'+PrimaryColor+','+freeSpecsButtonBackground+')',paddingTop:(systemInfo.statusBarHeight+7)+'px'}">
			<image :src="ossUrl+info.avatar" class="store-logo" mode="aspectFill"></image>
			<text class="store-name">{{info.storename}}</text>
		</view>

		<view class="uswiper_bg"></view>
		<u-swiper v-if="userInfo.token" :list="bannerList" height="170" bgColor="" indicatorInactiveColor="#CFCFCF" indicatorActiveColor="#FE4E5F"
			indicator indicatorMode="dot" previousMargin="20" nextMargin="20" circular :autoplay="true"
			radius="8"></u-swiper>
		<!-- 分享 -->
		<image class="act_share" showLoading="true" src="/static/new/act_share.png" mode="widthFix"
			@click="onJump('/pages/userReport/userReport')"></image>
		<!-- 会员中心 -->
		<view class="section user_center">
			<view class="section-title"><text class="line">会员中心</text></view>
			<!-- 已登录 -->
			<view class="section-body" v-if="userInfo.token">
				<view class="fl">
					<u--image class="avator" :src="ossUrl+userInfo.avatarUrl"
						width="140rpx" height="140rpx" radius="140rpx"></u--image>
					<view class="fl-body" @click="onAuthorization">
						<view class="name"><text v-if="userInfo.nickName" class="nickName">{{userInfo.nickName}}</text>
							<image class="vip" src="/static/new/vip.png" mode="aspectFit"></image>
						</view>
						<view class="tel" v-if="userInfo.phoneNum">{{userInfo.phoneNum}}</view>
						<view class="tel" v-else>未绑定</view>
					</view>
				</view>
				<view class="fr">
					<view class="fr-body">
						<u-button text="员工端" v-if="is_staff ==1" @click="onJump('/staff/member/member')"></u-button>
						<u-button text="核销" v-else @click="onJump('/cards/cards')"></u-button>
						<u-button text="设置" @click="onJump('/pages/user/set')"></u-button>
					</view>
				</view>
			</view>
			<!-- 未登录 -->
			<view class="section-body" v-else>
				<view class="fl">
					<u--image class="avator" src="/static/new/zanwutx.png" width="140rpx" height="140rpx"
						radius="140rpx"></u--image>
					<view class="fl-body" @click="openLogin">
						<view class="name">请点击登录</view>
						<view class="tel">登录后享受更好的服务体验</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 会员权益 -->
		<view class="section user_quanyi">
			<view class="section-title"><text class="line">会员权益</text></view>
			<view class="section-body">
				<u-row>

					<u-col span="6">
						<view class="item item-kabao" @click="onJump('/pages/cards/cards')">
							<view class="item-title">
								<text class="name">我的优惠卡包</text>
								<text>助力买 更划算</text>
							</view>
							<view class="item-more">点击查看 <image src="../../static/new/icon_more.png" mode="aspectFit"
									class="icon-more"></image>
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="item item-yanguang" @click="onJump('/pages/optometryList/optometryList')">
							<view class="item-title">
								<text class="name">我的验光单</text>
								<text>爱护眼睛 从现在开始</text>
							</view>
							<view class="item-more">点击查看 <image src="../../static/new/icon_more.png" mode="aspectFit"
									class="icon-more"></image>
							</view>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="6">
						<view class="item item-jifen" @click="onJump('/pages/jifen/jifen')">
							<view class="item-title">
								<text class="name">我的积分</text>
								<text>帮你省下更多</text>
							</view>
							<view class="item-more">点击查看 <image src="../../static/new/icon_more.png" mode="aspectFit"
									class="icon-more"></image>
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="item item-store" @click="onJump('/pages/storeIntro/storeIntro')">
							<view class="item-title">
								<text class="name">门店介绍</text>
								<text>关于我们</text>
							</view>
							<view class="item-more">点击查看 <image src="../../static/new/icon_more.png" mode="aspectFit"
									class="icon-more"></image>
							</view>
						</view>
					</u-col>
				</u-row>

			</view>
		</view>
		<!-- <view class="group_2 flex-col">
			<view class="box_2 flex-col">

			 <view class="group_4 flex-row justify-between">
					<view class="image-text_2 flex-row">
						<image class="image_2" referrerpolicy="no-referrer" :src="ossUrl+info.avatar" />
						<view class="text-group_2 flex-col justify-between">
							<text class="text_14">{{info.storename}}</text>
							<view style="margin-top: 34rpx;margin-left: -10rpx;">
								<u-rate count="5" active-color="#FEC630" value="5" size="25" readonly></u-rate>
							</view>
							<text class="text_15">{{info.storeaddress}}</text>
						</view>
						<view class="section_2 flex-col"></view>
						<view class="section_3 flex-col"></view>
						<view class="section_4 flex-col"></view>
						<view class="section_5 flex-col"></view>
						<view class="section_6 flex-col"></view>
					</view>
					<view class="text-wrapper_3 flex-col" @click="showList"><text class="text_16">更换门店</text></view>
				</view>
				<u-popup :show="show" @close="close" mode="center" :round="10">
					<view>
						<u-list @scrolltolower="scrolltolower">
							<u-list-item v-for="(item, index) in list" :key="index">
								<u-cell :title="`列表长度-${index + 1}`">
									<u-avatar slot="icon" shape="square" size="35" :src="item.url"
										customStyle="margin: -3px 5px -3px 0"></u-avatar>
								</u-cell>
							</u-list-item>
						</u-list>
					</view>
				</u-popup>
				<view class="group_5 flex-row justify-between">
					<view class="section_7 flex-col">
						<view class="block_1 flex-row" @click="onJump('/pages/optometryList/optometryList')">
							<image class="label_1" referrerpolicy="no-referrer" src="/static/left.png" />
							<view class="text-wrapper_4 flex-col">
								<text class="text_18" style="margin-left: -50rpx;line-height: 90rpx;">验光单</text>
								<text class="text_17" style="margin-left: -50rpx;">爱护眼睛、从现在开始</text>
							</view>
						</view>
					</view>
					<view class="section_8 flex-col justify-between">
						<view class="group_6 flex-col" @click="onJump('/pages/cards/cards')">
							<text class="text_18">优惠卡包</text>
							<text class="text_19">爱护眼睛、从现在开始</text>
							<image class="label_2" referrerpolicy="no-referrer" src="/static/left.png" />
							<image class="image_3" referrerpolicy="no-referrer" src="/static/sale.png" />
						</view>
						 <button style="line-height: unset;"  open-type="share">
						<button style="line-height: unset;" @click="onJump('/pages/userReport/userReport')">
							<view class="group_7 flex-col">
								<text class="text_20">分享好友</text>
								<text class="text_21">分享好友拿免费奖励</text>
								<image class="label_3" referrerpolicy="no-referrer" src="/static/left.png" />
								<image class="image_4" referrerpolicy="no-referrer" src="/static/gift.png" />
							</view>
						</button>
					</view>
				</view>
				      <image
	      style="width: 100%;height:1500rpx;margin-top: -60rpx;"
			mode="aspectFit"
	        :src="ossUrl+banner"
	      />
	</view>-->
		<!-- <f-tabbar></f-tabbar> -->

		<!-- 导航菜单 -->
		<view class="tabbar-hei"></view>
		<view class="tabbar">

			<view class="tabbar-item" @click="onJump('/pages/groupbuy/groupbuy')">
				<image src="/static/new/nav_group.png" class="icon icon-tg" mode="aspectFit"></image>
				<text>团购</text>
			</view>

			<view class="tabbar-item tabbar-item-mid" @click="onJump('/pages/userReport/userReport')">
				<image src="/static/new/nav_zhuli.png" class="icon" mode="aspectFit"></image>
			</view>

			<view class="tabbar-item" @click="onMini()">
				<image src="/static/new/nav_yilianti.png" class="icon icon-ylt" mode="aspectFit"></image>
				<text>医联体</text>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import fNavbar from '@/components/module/f-navbar/f-navbar';
	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
	import {
		storeBanner,
		getStore,
		getStoreList,
		myIsStaff
	} from '@/config/api.js';
	import base from '@/config/baseUrl';

	export default {

		components: {
			fNavbar,
			fTabbar,
		},
		computed: {
			...mapState(['PrimaryColor', 'userInfo']),
			freeSpecsButtonBackground() {
				return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 1)
			},
		},
		data() {
			return {
				ossUrl: base.ossUrl,
				systemInfo: base.systemInfo,
				scrollTop: 0,
				banner: "/storage/applet/static/banner.png",
				store_id: 0,
				info: [],
				list: [],
				show: false,
				bannerList: [], //门店实景图
				is_staff: 0, //是否是用户的
			}
		},
		onLoad(option) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// option.scene = 9;
			const scene = decodeURIComponent(option.scene)
			if (scene && scene != undefined && scene > 0) {
				this.store_id = scene
				//扫码进来的,存储店铺id
				uni.setStorageSync('store_id', scene);
				var userInfoOld = uni.getStorageSync('userInfo')
				var that = this
				if (userInfoOld) {
					let httpData = {
						store_id: this.store_id,
					};
					uni.$u.http.post('/user/update', httpData).then(res => {
						let userInfoNew = {
							...userInfoOld,
							store_id: that.store_id,
						}
						userInfoNew.store_id = scene
						that.setUserInfo(userInfoNew)
					});
				}
			}
			this.getStore();
			this.userInfos();
			this.getBanner();
		},
		onShow() {
			// this.getStore();
			// this.userInfos();
			// this.getBanner();
		},
		watch: {
			userInfo(newv, oldv) {
				this.getStore();
				this.userInfos();
				this.getBanner();
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			onJump(url) {
				uni.navigateTo({
					url: url
				})
			},
			onMini() {
				uni.navigateToMiniProgram({
					appId: 'wx3b62af6988d814f7', // 目标小程序appid
					path: 'pages/index/index',
					extraData: {},
					success(res) {
						uni.showToast({
							title: '跳转成功'
						})
					}
				})
			},
			getStore() {
				var userInfo = uni.getStorageSync('userInfo')
				this.store_id = userInfo.store_id
				if (this.store_id == 0) return
				let httpData = {
					store_id: this.store_id
				}

				getStore({
					params: httpData
				}).then((res) => {
					this.info = res
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
			userInfos() {
				var storeUserInfo = uni.getStorageSync('userInfo')
				if (!storeUserInfo.token) return
				this.store_id = storeUserInfo.store_id
				myIsStaff({}).then((res) => {
					this.is_staff = res.data.is_staff
				}).catch((err) => {})
			},
			onShareAppMessage(e) {
				let shareobj = {
					title: '邀请好友，天降惊喜',
					path: '/pages/share/share?shareId=' + this.userInfo.userId,
					imageUrl: this.shareImg, //分享的图片  支持PNG及JPG。显示图片长宽比是 5:4。
				}
				return shareobj
			},
			showList() {
				getStoreList({}).then((res) => {
					this.list = res
					this.show = true
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
			close() {
				this.show = false
			},
			// 拷贝
			copy(notice) {
				uni.setClipboardData({
					data: notice,
					success(res) {
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				})
			},

			onAuthorization(e) {
				// #ifdef MP-WEIXIN
				this.$store.commit('setShowWxLogin', true) //打开微信新授权组件
				// #endif
				// #ifdef MP-ALIPAY
				getUserInfo(info => {
					console.log(info, '授权信息')
					let httpData = {
						code: this.code,
						nickName: info.nickName || '', //昵称
						avatarUrl: info.avatarUrl || '', //头像
						gender: info.gender || '', //性别 0:未知 1:男 2:女
					}
					// uni.$u.http.post('您的接口', httpData).then(res => {
					let userInfo = {
						// ...res,
						token: true, //token用于判断是否登录
					}
					// this.setUserInfo(userInfo)
					// setTimeout(()=>{
					//     uni.showToast({
					//     	title: '登录成功',
					//     	icon: 'none'
					//     });
					//     this.closeLogin();
					// },100)
					// })
				}, err => {
					// this.closeLogin();
				})
				// #endif
			},
			//banner
			getBanner() {
				var userInfo = uni.getStorageSync('userInfo')
				this.store_id = userInfo.store_id
				if (this.store_id == 0) return
				let httpData = {
					type: 1,
					store_id: this.store_id
				}
				storeBanner({
					params: httpData
				}).then((res) => {
					if (res && res.length != 0) {
						this.bannerList = res.map(item => {
							return this.ossUrl + item.tempimg
						});
					}
				}).catch((err) => {
					console.log(err, 'catch')
				})
			},

			openLogin() {
				this.authorization();
				this.judgeLogin()
			},
			//订阅消息授权
			authorization() {
				// let date = new Date();
				// let year = date.getFullYear();
				// let month = date.getMonth() + 1;
				// let day = date.getDate();
				// var timgx = year+'-'+ month+'-'+ day;
				// var timgc =	uni.getStorageSync('subscriber_time');
				// if(timgc != timgx)
				// {
				// 定义需要订阅的模板ID列表
				const templateIds = ['FfjkCXULs7j8AI5_aV5Dsj3q6AvrIeDPNbtlVFWBr88'] // 这里只作为示例，实际使用时应根据自己的情况修改
				// 发起订阅消息授权请求
				uni.requestSubscribeMessage({
					tmplIds: templateIds,
					success(res) {
						uni.setStorageSync('subscriber_time', timgx)
					},
					fail(err) {

					}
				})
				// }
			}
		},

	}
</script>

<style lang="scss" scoped>
	body *,
	page view {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	body {
		font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
			Arial, PingFang SC-Light, Microsoft YaHei;
		margin: 0;
	}

	button {
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		outline: none;
		background-color: transparent;
	}

	button:active {
		opacity: 0.6;
	}

	// 头部
	.home-header {
		@extend .flex-row;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 20rpx;

		.store-logo {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50rpx;
		}

		.store-name {
			font-size: 35rpx;
			font-weight: bold;
			margin-left: 20rpx;
			color: #ffffff;
		}
	}

	//轮播图背景
	.uswiper_bg {
		display: flex;
		width: 100%;
		height: 165rpx;
		position: relative;
		background-color: $uni-newcolor-primary;
		background-image: url(/static/new/swiper_bg.png);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	/deep/ .u-swiper {
		margin-top: -165rpx !important;
	}

	// 分享
	.act_share {
		width: 690rpx;
		margin: 20rpx 30rpx;
	}

	// 会员中心
	.section {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 7px;
		margin: 0 20rpx 20rpx;
		overflow: hidden;

		.section-title {
			padding: 0 20rpx;
			line-height: 3;
			font-size: 30rpx;
			font-weight: bold;
			color: #ffffff;
			background-color: $uni-newcolor-primary;

			.line {
				border-left: 7rpx solid #ffffff;
				padding-left: 20rpx;
			}
		}

		&.user_center {
			.section-body {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;

				.fl {
					flex: 1;
					display: flex;
					flex-direction: row;
					align-items: center;

					/deep/ .u-image {
						border: 5rpx solid $uni-newcolor-primary !important;
						overflow: auto !important;
						image{
							width: auto;
							height: auto;
							max-width: 100%;
							max-height: 100%;
						}
					}

					.fl-body {
						margin-left: 20rpx;

						.name {
							display: flex;
							align-items: center;
							font-size: 36rpx;
							line-height: 1.6;
							color: #333333;

							.nickName {
								display: block;
								width: auto;
								max-width: 200rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.vip {
								margin-left: 7rpx;
								width: 70rpx;
								height: 32rpx;
							}
						}

						.tel {
							font-size: 24rpx;
							color: rgba(51, 51, 51, 1);
						}
					}
				}

				.fr {
					display: flex;
					width: 250rpx;
					align-items: center;
					justify-content: flex-end;

					.fr-body {
						display: flex;

						/deep/ .u-button {
							height: 55rpx;
							background-color: $uni-newcolor-primary;
							border-radius: 100rpx;
							color: #ffffff;
							margin-left: 20rpx;
							border: none;
							box-shadow: 0 5px 10px rgba(249, 54, 72, 0.5);
						}
					}
				}

			}
		}

		// 会员权益
		&.user_quanyi {
			.section-body {

				padding: 10rpx;

				.item {
					display: flex;
					flex-direction: column;
					border-radius: 7px;
					width: 330rpx;
					color: #ffffff;
					margin: 10rpx;
					padding: 20rpx;

					&.item-kabao {
						background:
							url('/static/new/mod_bg.png') right bottom no-repeat, url('/static/new/mod_kabao.png') 90% 80% no-repeat,
							linear-gradient(to bottom, #11CF89, #37E890);
						background-size: 60%, 38%;
					}

					&.item-yanguang {
						background:
							url('/static/new/mod_bg.png') right bottom no-repeat, url('/static/new/mod_yanguang.png') 90% 80% no-repeat,
							linear-gradient(to bottom, #FFA332, #FFC205);
						background-size: 60%, 38%;
					}

					&.item-jifen {
						background:
							url('/static/new/mod_bg.png') right bottom no-repeat, url('/static/new/mod_jifen.png') 90% 80% no-repeat,
							linear-gradient(to bottom, #FE712A, #FF9756);
						background-size: 60%, 30%;
					}

					&.item-store {
						background:
							url('/static/new/mod_bg.png') right bottom no-repeat, url('/static/new/mod_storeintro.png') 90% 80% no-repeat,
							linear-gradient(to bottom, #30AEFB, #60C9FF);
						background-size: 60%, 30%;
					}

					.item-title {
						display: flex;
						flex-direction: column;
						font-size: 24rpx;

						.name {
							font-size: 30rpx !important;
							line-height: 2;
							font-weight: bold;
						}
					}

					.item-more {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						line-height: 2;
						margin-top: 50rpx;

						.icon-more {
							width: 20px;
							height: 20px;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}

	// 导航菜单
	.tabbar-hei {
		display: flex;
		height: 220rpx;
	}

	.tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		background-color: $uni-newcolor-primary;

		.tabbar-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 33.333333%;
			color: #fff;
			padding: 20rpx 20rpx 15rpx;
			position: relative;
			text-align: center;

			.icon {
				width: 60rpx;
				height: 60rpx;

				&.icon-ylt {
					width: 70rpx;
					height: 70rpx;
				}
			}

			text {
				font-size: 24rpx;
				line-height: 1.8;
			}

			&.tabbar-item-mid {
				margin-top: -130rpx;

				.icon {
					width: 180rpx;
					height: 180rpx;
				}
			}
		}
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.align-start {
		display: flex;
		align-items: flex-start;
	}

	.align-center {
		display: flex;
		align-items: center;
	}

	.align-end {
		display: flex;
		align-items: flex-end;
	}

	.page {
		// background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 750rpx;

		.group_2 {
			width: 750rpx;
			// height: 1290rpx;
			// background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG682d148e99713194597ea0074a9d89f4.png)
			// 100% no-repeat;
			background-size: 100% 100%;

			.box_1 {
				background-color: rgba(216, 216, 216, 1);
				width: 750rpx;
				height: 88rpx;
				margin-top: -408rpx;

				.text-wrapper_2 {
					background-color: rgba(216, 216, 216, 0.01);
					height: 40rpx;
					width: 110rpx;
					margin: 26rpx 0 0 48rpx;

					.text_13 {
						width: 110rpx;
						height: 40rpx;
						overflow-wrap: break-word;
						color: rgba(255, 255, 255, 1);
						font-size: 30rpx;
						letter-spacing: -0.5px;
						font-family: PingFang SC-Medium;
						font-weight: 500;
						text-align: center;
						white-space: nowrap;
						line-height: 40rpx;
					}
				}

				.image-wrapper_1 {
					background-color: rgba(216, 216, 216, 0.01);
					width: 134rpx;
					height: 24rpx;
					margin: 36rpx 28rpx 0 430rpx;

					.thumbnail_1 {
						width: 34rpx;
						height: 22rpx;
					}

					.thumbnail_2 {
						width: 32rpx;
						height: 22rpx;
						margin-left: 10rpx;
					}

					.image_1 {
						width: 50rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}
			}

			.box_2 {
				width: 750rpx;

				// height: 1108rpx;
				.group_3 {
					width: 686rpx;
					height: 228rpx;
					margin: 16rpx 0 0 32rpx;

					.thumbnail_3 {
						width: 28rpx;
						height: 28rpx;
						margin-top: 14rpx;
					}

					.image-text_1 {
						width: 256rpx;
						height: 174rpx;
						margin: 54rpx 0 0 186rpx;

						.section_1 {
							width: 170rpx;
							height: 116rpx;
							margin-left: 46rpx;
						}

						.text-group_1 {
							width: 256rpx;
							height: 46rpx;
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 32rpx;
							font-family: Source Han Sans-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 46rpx;
							margin-top: 12rpx;
						}
					}

					.image-wrapper_2 {
						background-color: rgba(0, 0, 0, 0.2);
						border-radius: 14px;
						width: 156rpx;
						height: 56rpx;
						border: 0.5px solid rgba(255, 255, 255, 0.5);
						margin-left: 60rpx;

						.thumbnail_4 {
							width: 32rpx;
							height: 12rpx;
							margin: 22rpx 0 0 26rpx;
						}

						.thumbnail_5 {
							width: 32rpx;
							height: 32rpx;
							margin: 12rpx 24rpx 0 42rpx;
						}
					}
				}

				.group_4 {
					width: 686rpx;
					height: 174rpx;
					margin: 100rpx 0 0 32rpx;

					.image-text_2 {
						position: relative;
						width: 472rpx;
						height: 174rpx;

						.image_2 {
							width: 172rpx;
							height: 174rpx;
							border-radius: 20rpx;
							box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
						}

						.text-group_2 {
							width: 280rpx;
							height: 174rpx;
							margin-left: 20rpx;

							.text_14 {
								width: 280rpx;
								height: 40rpx;
								overflow-wrap: break-word;
								color: rgba(61, 61, 61, 1);
								font-size: 28rpx;
								font-family: Source Han Sans-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 40rpx;
							}

							.text_15 {
								width: 280rpx;
								height: 34rpx;
								overflow-wrap: break-word;
								color: rgba(153, 153, 153, 1);
								font-size: 24rpx;
								font-family: Source Han Sans-Regular;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
							}
						}

						.section_2 {
							width: 38rpx;
							height: 38rpx;
							margin: 94rpx 0 0 -240rpx;
						}

						.section_3 {
							width: 36rpx;
							height: 38rpx;
							margin: 94rpx 0 0 4rpx;
						}

						.section_4 {
							width: 38rpx;
							height: 38rpx;
							margin: 94rpx 0 0 4rpx;
						}

						.section_5 {
							width: 38rpx;
							height: 38rpx;
							margin: 94rpx 80rpx 0 2rpx;
						}

						.section_6 {
							position: absolute;
							left: 192rpx;
							top: 94rpx;
							width: 38rpx;
							height: 38rpx;
						}
					}

					.text-wrapper_3 {
						background-color: rgba(51, 179, 126, 1);
						border-radius: 40px;
						height: 60rpx;
						margin-top: 62rpx;
						width: 154rpx;

						.text_16 {
							width: 112rpx;
							height: 40rpx;
							overflow-wrap: break-word;
							color: rgba(255, 255, 255, 1);
							font-size: 28rpx;
							font-family: Source Han Sans-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 40rpx;
							margin: 10rpx 0 0 22rpx;
						}
					}
				}

				.group_5 {
					width: 686rpx;
					height: 448rpx;
					margin: 66rpx 0 22rpx 32rpx;

					.section_7 {
						box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
						background-color: rgba(255, 255, 255, 1);
						border-radius: 10px;
						height: 446rpx;
						width: 330rpx;

						.block_1 {
							box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
							background-color: rgba(255, 255, 255, 1);
							border-radius: 10px;
							width: 330rpx;
							height: 446rpx;

							.label_1 {
								width: 52rpx;
								height: 52rpx;
								margin: 328rpx 0 0 32rpx;
							}

							.text-wrapper_4 {
								height: 100%;
								background: url("/static/bill.png") 100% no-repeat;
								// background-size: 100% 100%;
								width: 68%;

								// margin: 246rpx 8rpx 0 48rpx;
								.text_17 {
									width: 64rpx;
									height: 30rpx;
									overflow-wrap: break-word;
									color: #999999;
									font-size: 24rpx;
									font-family: Source Han Sans-Heavy;
									font-weight: 900;
									text-align: left;
									white-space: nowrap;
									line-height: 0rpx;
									// margin: 70rpx 0 0 32rpx;
								}
							}
						}
					}

					.section_8 {
						width: 330rpx;
						height: 448rpx;

						.group_6 {
							box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
							background-color: rgba(255, 255, 255, 1);
							border-radius: 10px;
							position: relative;
							width: 330rpx;
							height: 212rpx;
							justify-content: flex-center;

							.text_18 {
								width: 128rpx;
								height: 46rpx;
								overflow-wrap: break-word;
								color: rgba(61, 61, 61, 1);
								font-size: 32rpx;
								font-family: Source Han Sans-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 46rpx;
								margin: 20rpx 0 0 32rpx;
							}

							.text_19 {
								width: 240rpx;
								height: 34rpx;
								overflow-wrap: break-word;
								color: rgba(153, 153, 153, 1);
								font-size: 24rpx;
								font-family: Source Han Sans-Regular;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
								margin: 4rpx 0 0 32rpx;
							}

							.label_2 {
								width: 52rpx;
								height: 52rpx;
								margin: 36rpx 0 20rpx 32rpx;
							}

							.image_3 {
								position: absolute;
								left: 0;
								top: 0;
								width: 330rpx;
								height: 212rpx;
							}
						}

						.group_7 {
							box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
							background-color: rgba(255, 255, 255, 1);
							border-radius: 10px;
							position: relative;
							width: 330rpx;
							height: 212rpx;
							margin-top: 24rpx;
							justify-content: flex-center;

							.text_20 {
								width: 128rpx;
								height: 46rpx;
								overflow-wrap: break-word;
								color: rgba(61, 61, 61, 1);
								font-size: 32rpx;
								font-family: Source Han Sans-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 46rpx;
								margin: 20rpx 0 0 32rpx;
							}

							.text_21 {
								width: 216rpx;
								height: 34rpx;
								overflow-wrap: break-word;
								color: rgba(153, 153, 153, 1);
								font-size: 24rpx;
								font-family: Source Han Sans-Regular;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
								margin: 4rpx 0 0 32rpx;
							}

							.label_3 {
								width: 52rpx;
								height: 52rpx;
								margin: 36rpx 0 20rpx 32rpx;
							}

							.image_4 {
								position: absolute;
								left: 0;
								top: 0;
								width: 330rpx;
								height: 212rpx;
							}
						}
					}
				}
			}

			.box_3 {
				position: relative;
				width: 750rpx;
				height: 1332rpx;
				// background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/MasterDDSSlicePNG9d616e6a8c3b72752770fd2469a364a2.png)
				//   100% no-repeat;
				background-size: 100% 100%;
				margin: -2rpx 0 828rpx 0;

				.block_2 {
					box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
					background-color: rgba(255, 255, 255, 1);
					position: absolute;
					left: 2rpx;
					top: 338rpx;
					width: 750rpx;
					height: 98rpx;

					.image-text_3 {
						width: 52rpx;
						height: 86rpx;
						margin: 6rpx 0 0 160rpx;

						.label_4 {
							width: 52rpx;
							height: 52rpx;
						}

						.text-group_3 {
							width: 48rpx;
							height: 34rpx;
							overflow-wrap: break-word;
							color: rgba(51, 179, 126, 1);
							font-size: 24rpx;
							font-family: Source Han Sans-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 34rpx;
							margin-left: 2rpx;
						}
					}

					.image-text_4 {
						width: 96rpx;
						height: 86rpx;
						margin: 6rpx 138rpx 0 304rpx;

						.label_5 {
							width: 52rpx;
							height: 52rpx;
							margin-left: 22rpx;
						}

						.text-group_4 {
							width: 96rpx;
							height: 34rpx;
							overflow-wrap: break-word;
							color: rgba(119, 119, 119, 1);
							font-size: 24rpx;
							font-family: Source Han Sans-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 34rpx;
						}
					}
				}

				.image-wrapper_3 {
					background-color: rgba(255, 255, 255, 1);
					height: 68rpx;
					width: 750rpx;
					position: absolute;
					left: 2rpx;
					top: 436rpx;

					.image_5 {
						width: 280rpx;
						height: 68rpx;
						margin-left: 234rpx;
					}
				}
			}
		}
	}
</style>